<style lang="less">
  .bench_search {
    margin-bottom: 10px;
  }
  .page_style {
    margin-top: 10px;
    text-align: right;
  }
  .Col {
      margin-top: 10px;
  }
</style>
<template>
  <Row class="bench_search">
    <Col span="6" class="Col">
        <span>时间范围：</span>
        <DatePicker type="datetimerange" format="yyyy/MM/dd" transfer="" style="width: 70%"
                    placement="bottom-end" v-model="applytime"></DatePicker>
    </Col>
    <Col span="6" class="Col">
        <span>事项类型：</span>
        <Select v-model="searchInfo.item_type" filterable transfer="" style="width: 70%;" @on-change="changeItem1(searchInfo.item_type)">
        <Option :value="item.id" v-for="item in treelist" v-bind:key="item.id">{{item.type_name}}</Option>
        </Select>
    </Col>
    <Col span="6" class="Col">
        <span>事项名称：</span>
        <Select v-model="searchInfo.item_id" filterable transfer="" style="width: 70%;">
        <Option :value="item.id" v-for="item in eventListSQ" v-bind:key="item.id">{{item.text}}</Option>
        </Select>
    </Col>
    <!-- <Col span="4" style="float:right" class="Col">
    </Col> -->
    <Col span="2" style="float:right" class="Col">
        <Button class="new-btn-sty" @click="export3rdlog"><Icon type="ios-download-outline"/> 导出结果</Button>
    </Col>
    <Col span="2" style="float:right" class="Col">
        <Button class="new-btn-sty" @click="init()"><Icon type="ios-search" /> 搜索</Button>
    </Col>
    <Col span="6" class="Col">
        <span>请求结果：</span>
       <Select v-model="state" style="width: 70%;">
        <Option value="" >全部</Option>
        <Option value="1" >请求成功</Option>
        <Option value="2" >请求失败</Option>
        </Select>
    </Col>
    <Col span="6" class="Col">
        <span>失败原因：</span>
       <Select v-model="errmsg" style="width: 70%;">
        <Option value="" >全部</Option>
        <Option value="空字段数据">空字段数据</Option>
        <Option value="冗余数据">冗余数据</Option>
        <Option value="逻辑错误数据">逻辑错误数据</Option>
        <Option value="无关联数据错误">无关联数据错误</Option>
        <Option value="转码错误数据">转码错误数据</Option>
        <Option value="网络异常">网络异常</Option>
        </Select>
    </Col>
    <Col span="24">
      <Table border :columns="columns1" :data="datalist" style="margin-top:20px" ref="table3"></Table>
      <Page :total="total" @on-change="changePageNo" show-total class="page_style"/>
    </Col>
    <Modal v-model="modalEdit" title="反馈内容" width="700" cancel-text="关闭"
        @on-ok="ok111(searchInfo)" @on-cancel="modalEdit=false" ok-text="确定">
        <Form :model="searchInfo">
          <Row class="item1">
            <Col span="5" style="text-align: right" class="">反馈内容:</Col>
            <Col span="12" offset="1">
              <Input v-model="searchInfo.feedback" type="textarea"></Input>
            </Col>
          </Row>
        </Form>
      </Modal>
      <Modal v-model="modalLoading" title="正在加载" width="500">
        <span>数据正在加载请稍后</span>
      </Modal>
  </Row>
  <!-- <Row class="bench_search">
    <Col span="24">
        <Table border :columns="columns1" :data="datalist"></Table>
    </Col>
  </Row> -->
</template>
<script>
import { find3rdLogList, date2str, treelist, eventlistPC, updateFeedback, find3rdLogExcelList } from '@/api/eventlist'
export default {
  data () {
    return {
      itemlist: [],
      modalEdit: false,
      modalLoading: false,
      pagesize: 10,
      pageno: 1,
      total: 0,
      applytime: [],
      treelist: [],
      params: { row: '' },
      state: '',
      errmsg: '',
      eventListSQ: [],
      eventListSC: [],
      searchInfo: {
        item_type: '',
        item_id: ''
      },
      columns1: [
        { title: '第三方业务系统名称', key: 'threerd_name', width: 150, align: 'center' },
        { title: '事项名称', key: 'title', width: 250, align: 'center' },
        { title: '请求地址', key: 'interface_url', width: 300, align: 'center' },
        { title: '反馈内容', key: 'feedback', width: 300, align: 'center' },
        { title: '请求结果', key: 'state', width: 150, align: 'center' },
        { title: '备注', key: 'msg', width: 100, align: 'center' },
        { title: '失败原因', key: 'errmsg', width: 200, align: 'center' },
        { title: '请求时间', key: 'create_time', width: 150, align: 'center' },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          className: 'nopadding',
          minWidth: 100,
          render: (h, params) => {
            let temp = []
            temp.push(
              h('Button', {
                props: { type: 'primary', size: 'small' },
                style: { marginRight: '5px', backgroundColor: '#598ED1', borderColor: '#598ED1' },
                on: {
                  click: () => {
                    this.editNotice(params.row)
                  }
                }
              }, '反馈')
            )
            return h('div', temp)
          }
        }
      ],
      datalist: []
    }
  },
  methods: {
    init () {
      let params = {
        pageNo: this.pageno,
        pageSize: this.pagesize,
        start_time: date2str(this.applytime[0]),
        end_time: date2str(this.applytime[1]),
        item_type: this.searchInfo.item_type,
        item_id: this.searchInfo.item_id,
        errmsg: this.errmsg,
        state: this.state
      }
      find3rdLogList(params).then(res => {
        console.log(res.data.data.results.feedback)
        if (res.data.errcode === 0) {
          this.datalist = res.data.data.results
          this.total = res.data.data.totalRecord
        } else {
          this.$Notice.error({ title: '获取信息失败', desc: '查询列表失败' })
        }
      })
    },
    changePageNo (pageNo) {
      this.pageno = pageNo
      this.init()
    },
    // 已有事项列表，页面搜索栏使用
    getItemList () {
      eventlistPC({}).then(res => {
        if (res.data.errcode === 0) {
          this.eventListSC = res.data.data
          this.eventListSC.unshift({ id: 0, text: '全部' })
          this.$forceUpdate()
        } else {
          this.$Notice.error({ title: '获取信息失败', desc: '查询事项劣列表失败' })
        }
      })
    },
    // 事项类型列表，页面搜索栏使用
    getTreeList () {
      treelist({}).then(res => {
        if (res.data.errcode === 0) {
          this.treelist = res.data.data
          this.treelist.unshift({ id: '', type_name: '全部' })
          this.$forceUpdate()
        } else {
          this.$Notice.error({ title: '获取信息失败', desc: '查询事项类型列表失败' })
        }
      })
    },
    changeItem1 (item_type) {
      let that = this
      that.eventListSQ = []
      that.eventListSC.forEach(function (temp1, index) {
        if (temp1.org_code === item_type) {
          that.eventListSQ.push(temp1)
        }
      })
      that.eventListSQ.unshift({ id: 0, text: '全部' })
    },
    editNotice (item) {
      this.modalEdit = true
      console.log(item, 'aaaa')
      this.searchInfo.id = item.id || ''
      this.searchInfo.feedback = item.feedback || ''
    },
    ok111 (param) {
      console.log(param, '333333')
      updateFeedback(param).then(res => {
        if (res.data.errcode === 0) {
          this.init(this.params)
          this.$Notice.success({ title: '成功', desc: '' })
        } else {
          this.$Notice.error({ title: '失败', desc: res.data.errmsg })
        }
      })
    },
    // 导出结果
    export3rdlog () {
      this.modalLoading = true
      let params = {
        start_time: date2str(this.applytime[0]),
        end_time: date2str(this.applytime[1]),
        item_type: this.searchInfo.item_type,
        item_id: this.searchInfo.item_id,
        errmsg: this.errmsg,
        state: this.state
      }
      find3rdLogExcelList(params).then(res => {
        console.log(res.data.errcode)
        if (res.data.errcode === 0) {
          // this.searchInfo.loading3 = false
          let exportData = res.data.data
          this.$refs.table3.exportCsv({
            filename: '数据质量管理',
            columns: this.columns1,
            data: exportData.map((item, index) => {
              item.index = index + 1
              item.threerd_name = item.threerd_name
              item.title = item.title
              item.interface_url = item.interface_url
              item.feedback = item.feedback
              item.state = item.state
              item.msg = item.msg
              item.errmsg = item.errmsg
              item.create_time = item.create_time
              return item
            })
          })
        } else {
          // this.searchInfo.loading3 = true
          this.$Notice.error({ title: '导出失败', desc: '导出列表失败' })
        }
      })
    }
  },
  mounted () {
    this.init()
    this.getTreeList()
    this.getItemList()
  }
}
</script>
